<template>
	<view class="wrapper">
		<scroll-view scroll-x="true" class="scroll">
		<view class="header">
			<view class="tony_list" v-for="(item,index) in tonyList" :key="index" :class="item.state==1?'active':'default'" @tap="choosem" :data-index="index">
				<view class="tony_img">
					<view class="img_box">
						<image :src="item.img" mode=""></image>
					</view>
				</view>
				<view class="tony_info">
					<view class="name">{{item.name}}</view>
					<view class="introduce">{{item.introduce}}</view>
				</view>
			</view>
		</view>
		</scroll-view>
		<!-- 服务项目 -->
		<view class="choose">
			<view class="choose_title">
				<image src="../../static/img/common_icon/subscribe_choose.png" mode=""></image>
				<text>服务项目</text>
			</view>
			<view class="choose_content">
				<view class="name" v-for="(item,index) in choose" :key="index" :class="item.state==1?'active':'default'">
					{{item.name}}
				</view>
			</view>
		</view>
		<!-- 服务时间 -->
		<view class="time">
		</view>
	</view>
</template>
<script>
	export default{
		onLoad(){
		},
		data(){
			return{
				tonyList:[
					{
						name:'Tony',
						img:'../../static/img/temporary/tony_img.png',
						introduce:'资深造型师',
						state:true
					},
					{
						name:'Tony2',
						img:'../../static/img/temporary/tony_img.png',
						introduce:'资深造型师',
						state:false
					},
					{
						name:'Tony3',
						img:'../../static/img/temporary/tony_img.png',
						introduce:'资深造型师',
						state:false
					},
					{
						name:'Tony4',
						img:'../../static/img/temporary/tony_img.png',
						introduce:'资深造型师',
						state:false
					},
					{
						name:'Tony',
						img:'../../static/img/temporary/mine_logo.png',
						introduce:'资深造型师',
						state:false
					}
				],
				choose:[
					{name:'护理',id:1,state:true},
					{name:'染发',id:2,state:false},
					{name:'洗发',id:3,state:false},
					{name:'洗发',id:4,state:false},
					{name:'洗发',id:5,state:false}
				]
			}
		},
		methods:{
			choosem(e){
				console.log(e.currentTarget.dataset.index)
				let index = e.currentTarget.dataset.index;
				let state = this.tonyList[index].state
				this.tonyList[index].state = !state
				for (var i=0;i<this.tonyList.length;i++) {
					if(i==index){
						this.tonyList[i].state = !state
					}else{
						this.tonyList[i].state = false
					}
				}
			},
		}
	}
</script>

<style scoped>
	.wrapper{}
	.wrapper .scroll{
		height: 180rpx;
	}
	.wrapper .header{
		display: flex;
		padding-left: 40rpx;
		padding-top:45rpx;
	}
	.wrapper .header  .active{
		background: #0D6866 !important;
		color: white !important;
	}
	.wrapper .header .active .tony_info .name{
		color: white !important;
	}
	.wrapper .header  .active .tony_img .img_box{
		background: #0D6866 !important;
	}
	.wrapper .header  .active .tony_info .introduce{
		color: white !important;
	}
	.wrapper .header  .default{
		background: white !important;
		color: #0D6866 !important;
	}
	.wrapper .header  .default .tony_info .name{
		color: #0D6866 !important;
	}
	.wrapper .header  .default .tony_info .introduce{
		color: rgba(153,153,153,1) !important;
	}
	.wrapper .header  .default .tony_img .img_box{
		background: white !important;
	}
	.wrapper .tony_list{
		flex: 1;
		display: flex;
		box-shadow:0rpx 6rpx 12rpx rgba(0,0,0,0.16);
		opacity:1;
		border-radius:28rpx 40rpx 40rpx 40rpx;
		margin-right: 26rpx;
		background: white;
	}
	.wrapper .tony_list .tony_img{
		width: 113rpx;
		height: 100rpx;
		position: relative;
	}
	.wrapper .tony_list .tony_img .img_box{
		position: absolute;
		top: -28%;
		background: white;
		height: 100rpx;
		width: 113rpx;
		border-radius: 50%;

	}
	.wrapper .tony_list .tony_img image{
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-top: 5%;
		margin-left: 6%;

	}
	.wrapper .tony_list .tony_info{
		flex: 1;
		margin-left: 16rpx;
		margin-right: 40rpx;
		width: 150rpx;
		padding: 20rpx 0;
	}
	.wrapper .tony_list .tony_info .name{
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:400;
		line-height:40rpx;
		/* color:rgba(255,255,255,1); */
		color: #0D6866;
	}
	.wrapper .tony_list .tony_info .introduce{
		font-size:24rpx;
		font-family:PingFang SC;
		font-weight:400;
		line-height:34rpx;
		opacity:0.8;
		color:rgba(153,153,153,1);
	}
/* 项目服务 */
	.wrapper .choose{
		margin: 0rpx 40rpx 20rpx 40rpx;
		background: white;
		background:rgba(255,255,255,1);
		box-shadow:0rpx 2rpx 6rpx rgba(0,0,0,0.06);
		opacity:1;
		border-radius:40rpx;
		padding: 32rpx;
	}
	.wrapper .choose .choose_title{
		font-size:24rpx;
		font-family:PingFang SC;
		font-weight:500;
		line-height:34rpx;
		color:rgba(53,53,53,1);
		opacity:0.8;
	}
	.wrapper .choose .choose_title image{
		width: 34rpx;
		height: 34rpx;
		vertical-align: top;
		margin-right: 8rpx;
	}
	.wrapper .choose .choose_content{
		font-size:24rpx;
		font-family:PingFang SC;
		font-weight:400;
		line-height:34rpx;
		color:rgba(153,153,153,1);
		opacity:1;
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}
	.wrapper .choose .choose_content .name{
		padding: 0rpx 20rpx;
		border:2rpx solid rgba(153,153,153,1);
		opacity:1;
		border-radius:22rpx;
		line-height: 35rpx;
	}
	.wrapper .choose .choose_content .active{
		border:2rpx solid rgba(13,104,102,1);
		color:rgba(13,104,102,1);
	}
	.wrapper .choose .choose_content .default{
		border:2rpx solid rgba(153,153,153,1);
		color:rgba(153,153,153,1);
	}

</style>
